<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <div
        v-for="(item, index) in printData"
        :key="index"
        style="width: 1100px;height: 700px;padding: 10px;font-size: 200px;
  page-break-after:always;display: flex;flex-direction: column;
  justify-content: center;align-items: center;"
      >
        {{ item.locationCode }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PrintLocation',
  props: {
    printData: {}
  },
  data() {
    return {
    }
  },
  watch: {
    printData(val) {
      console.log(val)
      if (val.length > 0) {
        setTimeout(() => {
          this.print()
        }, 200)
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
      // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    }
  }
}
</script>
<style scoped>
</style>
